<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>传智健康</title>
        <meta name="description"           content="传智健康">
        <meta name="keywords"              content="传智健康">
        <meta name="viewport"              content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" >
        <link rel="stylesheet" href="../plugins/elementui/index.css">
        <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
        <link rel="stylesheet" href="../css/style.css">
        <style>
            .datatable {
                position: relative;
                box-sizing: border-box;
                -webkit-box-flex: 1;
                width: 100%;
                max-width: 100%;
                font-size: 14px;
                color: rgb(96, 98, 102);
                overflow: hidden;
                flex: 1 1 0%;
            }
            .datatable td, .datatable th {
                padding: 12px 0;
                min-width: 0;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                text-overflow: ellipsis;
                vertical-align: middle;
                position: relative;
                text-align: left;
            }
        </style>
    </head>
    <body class="hold-transition">
        <div id="app">
            <div class="content-header">
                <h1>系统<small>角色</small></h1>
                <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
                    <el-breadcrumb-permisson :to="{ path: '/' }">首页</el-breadcrumb-permisson>
                    <el-breadcrumb-permisson>系统</el-breadcrumb-permisson>
                    <el-breadcrumb-permisson>角色</el-breadcrumb-permisson>
                </el-breadcrumb>
            </div>
            <div class="app-container">
                <div class="box">
                    <div class="filter-container">
                        <el-input style="width: 200px;"           class="filter-permisson"
                                  placeholder="名称"               v-model="queryPageBean.queryString"
                                  @keyup.enter.native="this.queryPageBean.currentPage=1;this.select();"></el-input>
                        <el-button                                class="dalfBut" @click="this.queryPageBean.currentPage=1;select();">查询</el-button>
                        <el-button type="primary"                 class="butT"    @click="initAndMakeDialogVisible"              >添加</el-button>
                    </div>
                    <el-table size="small" current-row-key="id"   :data="pageResult.rows" stripe highlight-current-row>
                        <el-table-column   type="name"            label="名称"     align="center" ></el-table-column>
                        <el-table-column   prop="keyword"         label="关键字"   align="center"></el-table-column>
                        <el-table-column   prop="description"     label="描述"     align="center"></el-table-column>
                        <el-table-column                          label="操作"     align="center">
                            <template      slot-scope="scope">
                                <el-button type="primary"         size="mini"      @click="initAndMakeDialogVisible(scope.row)">更新</el-button>
                                <el-button type="danger"          size="mini"      @click="delete(scope.row)"                  >删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div        class="pagination-container">
                        <el-pagination
                                class              ="pagination"
                                @current-change    ="select"
                                :current-page.sync ="queryPageBean.currentPage"
                                :page-size.sync    ="queryPageBean.pageSize"
                                layout             ="total, prev, pager, next, jumper"
                                :total             ="pageResult.total">
                        </el-pagination>
                    </div>
                    <div        class="add-form">
                        <el-dialog               :title="dialog_title"  :visible.sync="dialog.visible" >
                            <template>
                                <el-tabs         type="card"            v-model="dialog.active_tab">
                                    <el-tab-pane label="基本信息"        name="first">
                                        <el-form label-position="right" label-width="100px">
                                            <el-row>
                                            <el-col :span="12">
                                                <el-form-permisson label="名称">
                                                    <el-input v-model="role.name"/>
                                                </el-form-permisson>
                                            </el-col>
                                            </el-row>
                                            <el-row>
                                            <el-col :span="12">
                                                <el-form-permisson label="关键字">
                                                    <el-input v-model="role.keyword"/>
                                                </el-form-permisson>
                                            </el-col>
                                            </el-row>
                                            <el-row>
                                            <el-col :span="12">
                                                <el-form-permisson label="描述">
                                                    <el-input v-model="role.description"/>
                                                </el-form-permisson>
                                            </el-col>
                                            </el-row>
                                        </el-form>
                                    </el-tab-pane>
                                    <el-tab-pane label="包含的权限" name="second">
									<div class="checkScrol">
                                        <table class="datatable">
                                            <thead>
                                            <tr>
                                                <th>选择</th>
                                                <th>名称</th>
                                                <th>关键字</th>
                                                <th>描述</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr v-for="permisson in permissons_to_check">
                                                <td>
                                                    <input :id="permisson.id" v-model="role.permissonIds" type="checkbox" :value="permisson.id">
                                                </td>
                                                <td><label :for="permisson.id">{{permisson.name}}</label></td>
                                                <td><label :for="permisson.id">{{permisson.keyword}}</label></td>
                                                <td><label :for="permisson.id">{{permisson.description}}</label></td>
                                            </tr>
                                            </tbody>
                                        </table>
									</div>
                                    </el-tab-pane>
                                    <el-tab-pane label="包含的菜单" name="third">
                                        <div class="checkScrol">
                                            <table class="datatable">
                                                <thead>
                                                <tr>
                                                    <th>选择</th>
                                                    <th>名称</th>
                                                    <th>优先级</th>
                                                    <th>描述</th>
                                                    <th>图标</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                <tr v-for="menu in menus_to_check">
                                                    <td>
                                                        <input :id="menu.id" v-model="role.menuIds" type="checkbox" :value="menu.id">
                                                    </td>
                                                    <td><label :for="menu.id">{{menu.name}}</label></td>
                                                    <td><label :for="menu.id">{{menu.priority}}</label></td>
                                                    <td><label :for="menu.id">{{menu.description}}</label></td>
                                                    <td><label :for="menu.id">{{menu.icon}}</label></td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </el-tab-pane>
                                </el-tabs>
                            </template>
                            <div slot="footer" class="dialog-footer">
                                <el-button                @click="dialog.visible = false"                  >取消</el-button>
                                <el-button type="primary" @click="add"     v-if="dialog.for_what=='add'"   >确定</el-button>
                                <el-button type="primary" @click="update"  v-if="dialog.for_what=='update'">确定</el-button>
                            </div>
                        </el-dialog>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <script>
        var vue = new Vue({
            el: '#app',
            data:{
                queryPageBean: {
                    queryString:        null,
                    currentPage:            1,
                    pageSize:           10,
                },
                pageResult:{
                    total:              0,
                    rows:               []
                },
                role: {
                    id:                 "",
                    name:               "",
                    keyword:            "",
                    description:        "",
                    permissonIds:       [],
                    menuIds:            []
                },
                permissons_to_check:    [],
                menus_to_check:         [],
                dialog: {
                    for_what:           "add",      //["add","update"]
                    active_tab:         "first",    //["first","second","thrid"]
                    visible:            false,      //对话框是否可见
                },
            },
            computed: {
                dialog_title(){
                    return this.dialog.for_what=="add"?"添加一个新的角色":"更新一个角色";
                }
            },
            created() {
                this.select();
            },
            methods: {
                add() {
                    axios.post("/role/add.do",this.role).then((response)=>{
                        msg(response);
                        if(response.data.flag) this.dialog.visible = false;
                    }).finally(()=>{
                        this.select();
                    });
                },
                remove(row) {
                    this.$confirm(  '此操作将永久删除该数据, 是否继续?', '提示', {
                        confirmButtonText:  '确定',
                        cancelButtonText:   '取消',
                        type:               'warning',
                        center:             true
                    }).then(() => {
                        axios.get("/role/delete.do?id="+row.id).then((response)=>{
                            msg(response);
                            if(response.data.flag) return false;
                        });
                    })
                },
                update() {
                    axios.post("/role/update.do",this.role).then((response)=>{
                        msg(response);
                        if(response.data.flag) this.dialog.visible = false;
                    }).finally(()=>{
                        this.select();
                    });
                },
                select() {
                    axios.post("/role/selectPage.do",this.queryPageBean).then((response)=>{
                        this.pageResult= response.data;
                    });
                },
                initAndMakeDialogVisible(row) {
                    this.role = {};
                    this.dialog.active_tab = "first";
                    this.dialog.for_what=(row?"add":"update");
                    axios.get("/permisson/selectAll.do").then((response)=>{
                        msg(response);
                        this.permissons_to_check = response.data.data;
                        axios.get("/menu/selectAll.do").then((response)=>{
                            msg(response);
                            this.menus_to_check = response.data.data;
                            this.dialog.visible = true;
                        });
                    });
                    if(this.dialog.for_what="update"){
                        axios.get("/role/selectById.do?id="+row.id).then((response)=>{
                            msg(response);
                            if(response.data.flag) return false;
                            this.role = response.data.data;
                        });
                    }
                 }
            }
        });
        function msg(response){
            this.$message({type:response.data.flag?"success":"error",message:response.data.message});
        }
    </script>
</html>
